//window.onload = function() {
//    var xhr = new XMLHttpRequest()
//    xhr.open('get', '/album-list.json')
//    xhr.onload = function() {
//        var data = JSON.parse(this.responseText)
//        var list = data.albumList
//        var oContainer = document.querySelector('.container')
//        for (var i in list) {
//            var a = list[i]
//            var html = `<div><div><img src="${a.cover}"></div><h1><a href="/play.html?aid=${a.aid}">${a.title}</a></h1><p>${a.username}</p></div>`
//            oContainer.innerHTML += html
//        }
//    }
//    xhr.send()
//}

function render(list) {
  let oAlbumList = document.querySelector('.albumList')
  for (let i in list) {
    let album = list[i]

    let html = `    <div class="album">
      <div class="cover-wrapper">
        <img class="cover" src="${album.cover}">
      </div>
      <div class="title"><a href="/play.html?aid=${album.aid}">${album.title}</a></div>
      <div class="author">${album.username}</div>
    </div>`

    oAlbumList.innerHTML += html
  }
}

window.addEventListener('load', function () {
  let xhr = new XMLHttpRequest()
  xhr.open('get', '/album-list.json')
  xhr.addEventListener('load', function () {
    console.log(this.responseText)
    let data = JSON.parse(this.responseText)
    render(data.albumList)
  })
  xhr.send()
})